{extend name="public/base"/}
{block name="style"}
<style>
    .body-line-margin
    {
        margin-left: 3%;
        margin-bottom: 5px;
        font-weight: 900;
    }
</style>
{/block}
{block name="content"}
<form class="layui-form" action="{:url('save')}" method="post" lay-filter="email-template-form" id="email-template-form">
    {if !empty($template)}
    <input type="hidden" name="temp_id" value="{$template.temp_id}">
    {/if}
    <div class="layui-form-item">
        <div class="layui-col-xs3">
            <label class="layui-form-label xrequired">语言</label>
            <div class="layui-input-block">
                <select name="lang" lay-search>
                    <option value="">请选择</option>
                    {foreach $country as $c}
                    <option value="{$c.code_two}" {if !empty($template) && $template.lang == $c.code_two}selected{/if}>{$c.name_ch}</option>
                    {/foreach}
                </select>
            </div>
        </div>
        <div class="layui-col-xs3">
            <label class="layui-form-label xrequired">分类</label>
            <div class="layui-input-block">
                <select name="cate_id" lay-search>
                    <option value="">请选择</option>
                    {foreach $category as $c}
                    <option value="{$c.cate_id}" {if !empty($template) && $template.cate_id == $c.cate_id}selected{/if}>{php}echo str_repeat("├─",$c['level']);{/php}{$c.name}</option>
                    {/foreach}
                </select>
            </div>
        </div>
        <div class="layui-col-xs3">
            <label class="layui-form-label">主题</label>
            <div class="layui-input-block">
                <input type="text" {if !empty($template)}value="{$template.subject}"{/if} name="subject" class="layui-input">
            </div>
        </div>
        <div class="layui-col-xs3">
            <label class="layui-form-label">中文主题</label>
            <div class="layui-input-block">
                <input type="text" name="subject_ch" {if !empty($template)}value="{$template.subject_ch}"{/if} class="layui-input">
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-col-xs6">
            <label class="layui-form-label">关键词</label>
            <div class="layui-input-block">
                <input type="text" name="keyword" {if !empty($template)}value="{$template.keyword}"{/if} class="layui-input" placeholder="多个使用逗号分开">
            </div>
        </div>
        <div class="layui-col-xs6">
            <label class="layui-form-label">备注</label>
            <div class="layui-input-block">
                <input type="text" name="remark" {if !empty($template)}value="{$template.remark}"{/if} class="layui-input">
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-col-xs3">
            <label class="layui-form-label">排序</label>
            <div class="layui-input-block">
                <input type="number" name="sort" {if !empty($template)}value="{$template.sort}"{/if} class="layui-input">
            </div>
        </div>
        <div class="layui-col-xs3">
            <label class="layui-form-label">状态</label>
            <div class="layui-input-block">
                <input type="checkbox" name="status" {if empty($template)||$template->getData('status')==1}checked{/if} value="1" lay-skin="switch">
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-col-xs3">
            <label class="layui-form-label">文本/HTML</label>
            <div class="layui-input-block">
                <input type="checkbox" name="is_html" lay-filter="email-text" {if empty($template)||$template->getData('is_html')==0}checked{/if} value="1" lay-skin="switch">
            </div>
        </div>
    </div>
    <div class="layui-form-item" id="content-text" {if !empty($template) && $template->getData('is_html')==1}style="display: none;"{/if} >
        <h3 class="body-line-margin">邮件内容</h3>
        <textarea class="layui-textarea" name="content_text" style="height: 300px;">{if !empty($template)}{$template.content}{/if}</textarea>
    </div>
    <div class="layui-form-item" id="content-html" {if empty($template) || $template->getData('is_html')==0}style="display: none;"{/if}>
        <h3 class="body-line-margin">邮件内容</h3>
        <textarea id="email-content-html" name="content_html" style="width: 100%; height: 300px;">{if !empty($template)}{$template.content}{/if}</textarea>
    </div>
    <div class="layui-form-item">
        <table class="layui-table" lay-filter="email-variable-data" id="email-variable-data">
            <thead>
            <tr>
                <td>变量名</td>
                <td>变量值</td>
                <td>操作</td>
            </tr>
            </thead>
            <tbody>
            {if !empty($template) && !empty($template.variable)}
            {foreach $template.variable as $k=>$v}
            <tr>
                <td><input class="layui-input" value="{$k}" name="var[]"/></td>
                <td><input class="layui-input" value="{$v}" name="value[]"/></td>
                <td>
                    <button type="button" class="layui-btn layui-bg-blue layui-btn-sm var-operate-add">添加</button>
                    <button type="button" class="layui-btn layui-bg-red layui-btn-sm var-operate-remove">删除</button>
                </td>
            </tr>
            {/foreach}
            {/if}
            </tbody>
        </table>
    </div>
    <div class="layui-form-item">
        <h3 class="body-line-margin">邮件中文含义</h3>
        <textarea class="layui-textarea" name="content_ch" placeholder="选填">{if !empty($template)}{$template.content_ch}{/if}</textarea>
    </div>
    <div class="layui-form-item text-right">
        <div class="layui-col-xs6">
            <button class="layui-btn layui-bg-blue" lay-submit lay-filter="email-template-form">保存</button>
        </div>
    </div>
</form>
<script type="text/html" id="var-operate">
    <tr>
        <td><input class="layui-input" name="var[]"/></td>
        <td><input class="layui-input" name="value[]"/></td>
        <td>
            <button type="button" class="layui-btn layui-bg-blue layui-btn-sm var-operate-add">添加</button>
            <button type="button" class="layui-btn layui-bg-red layui-btn-sm var-operate-remove">删除</button>
        </td>
    </tr>
</script>
{/block}
{block name="script"}
<script src="__PUBLIC__/plugins/kindeditor/kindeditor-all-min.js"></script>
<script src="__PUBLIC__/plugins/kindeditor/lang/zh-CN.js"></script>
<script type="text/javascript">
    KindEditor.ready(function(K) {
        window.editor = K.create('#email-content-html');
    });
    layui.use(['layer', 'jquery', 'form'], function()
    {
        var layer = layui.layer
            ,$ = layui.jquery
            , form = layui.form;
        // HTML 控制开关
        form.on("switch(email-text)", function(data)
        {
            var $text = $("#content-text").hide()
                , $html = $("#content-html").hide();
            data.elem.checked ? $text.show() : $html.show();
        });

        // 如果为新增则自动添加一行
        if($("#email-variable-data tbody tr").length < 1)
        {
            $("#email-variable-data tbody").append($("#var-operate").html());
        }

        // 添加行
        $("body").on("click", ".var-operate-add", function()
        {
            $("#email-variable-data tbody").append($("#var-operate").html());
        });

        // 删除行
        $("body").on("click", ".var-operate-remove", function()
        {
            if($("#email-variable-data tbody tr").length < 2)
            {
                layer.msg("最后一行不能删除");
                return false;
            }
            $(this).parent().parent().remove();
        });
    });
</script>
{/block}